<template>
    <div>
        <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            ref="imageUpload"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleSuccess"
            :on-error="handleError"
            :limit="limit"
            :before-upload="handleBeforeUpload"
            :file-list="fileList"
            list-type="picture-card">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { baseURL, baseURLApi } from "@/utils/request";
export default {
    props: {
        value: String,
        // 图片数量限制
        limit: {
            type: Number,
            default: 1,
        },
        // 大小限制(MB)
        fileSize: {
            type: Number,
            default: 5,
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
            type: Array,
            default: () => ["png", "jpg", "jpeg"],
        }
    },
    data() {
        return {
            imageUrl: "",
            baseApi: baseURL,
            uploadImgUrl: baseURLApi +  "/api.common/upload", // 上传的图片服务器地址
            headers: {
                token: getToken(),
            },
            fileList: []
        };
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    if (val.indexOf(baseURL) != -1) {
                        this.imageUrl = val
                    }else {
                        this.imageUrl = this.baseApi + val;
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        // 上传前的执行方法
        handleBeforeUpload(file) {
            let isImg = false;
            if (this.fileType.length) {
                let fileExtension = "";
                if (file.name.lastIndexOf(".") > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
                }
                isImg = this.fileType.some(type => {
                    if (file.type.indexOf(type) > -1) return true;
                    if (fileExtension && fileExtension.indexOf(type) > -1) return true;
                    return false;
                });
            } else {
                isImg = file.type.indexOf("image") > -1;
            }

            if (!isImg) {
                this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
                return false;
            }

            if (this.fileSize) {
                const isLt = file.size / 1024 / 1024 < this.fileSize;
                if (!isLt) {
                    this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
                    return false;
                }
            }
        },
        // 图片上传成功
        handleSuccess: function (res, file) {
            if (res.code == 1) {
                this.imageUrl = res.data.fullurl;
                this.$refs.imageUpload.clearFiles();
                this.$emit('input', res.data.url);
            } else {
                this.$message.error("图片上传失败");
            }
        },
        handleError: function (err, file, fileList) {
            this.$message.error("图片上传失败");
        }
    }
}
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
    }
    .avatar {
        max-width: 100%;
        max-height: 100%;
        /* height: 100%; */
        display: block;
        padding: 3px;
        box-sizing: border-box;
        background: #fff;
    }
    ::v-deep .el-upload--picture-card{
        position: relative;
        background-color: #f4f6fc;
        border: 1px dashed#f4f6fc;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
    }
    ::v-deep .el-upload--picture-card i{
        font-size: 24px;
        color: #ddd;
        font-weight: 500;
    }
    .close-button{
        position: absolute;
        z-index: 999;
        height: 20px;
        width: 20px;
        top: -10px;
        right: -10px;
        display: block;
        line-height: 30px;
    }
    .close-button i{
        font-size: 16px;
        padding: 2px;
        background: #FFF;
        border: 1px solid#f4f6fc;
        border-radius: 20px;
    }
</style>